<template>
    <div class="login">
        <img class="logo" src="@/assets/img/login/logo-text.png">
        <div class="main">
            <div class="login-box-wrap-bg">
                <div class="login-box-wrap">
                    <form @submit.prevent="submit">
                        <img class="logo" src="@/assets/img/login/logo.png" width="300"><br>
                        <img src="@/assets/img/login/qrcode.png" width="110">
                        <div class="form-group">
                            <input type="text" placeholder="帐号" v-model="account">
                            <input type="password" placeholder="密码" v-model="pwd">
                            <select v-model="type" @change="change">
                                <option value="0">病区</option>
                                <option value="1">手术室</option>
                                <option value="2">准备间</option>
                                <option value="3">排班</option>
                            </select>
                            <div class="btn-group clearfix">
                                <button type="submit" class="sure">确定</button>
                                <button type="button" class="cancel">取消</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
            <div class="err-msg"><i class="icon-login-err"></i>您输入的工号或密码有误，请重新输入。</div>
        </div>
    </div>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';

import { State, Action, Getter } from 'vuex-class';

 const namespace: string = 'login';

@Component({
    components: {
    },
})

export default class Login extends Vue {
    type = 0
    account = ''
    pwd = ''

    @Action('loginAction', { namespace }) Login: any;
	@Getter('loginPost', { namespace }) "infoGetAllList": string;

    mounted() {
        // console.log()
        // console.log(this.status)
      
    //    this.$store.commit({
    //         userNameOrEmailAddress:"addIncrement",
    //             password:5,
    //             rememberClient:18,
    //    });
        
    } 


    change() {
        
    }

    submit() {
         // this.Login().commit.Login("ew");
        // vuex.commit('LoginM', {path:'a.b.c', data:val})
        //console.log(this.$store);
        this.$store.commit(
            'loginM',{
                userNameOrEmailAddress:"admin",
                password:"admin",
                rememberClient:true,
            }
        );

        // if (0 == this.type) {
        //     this.$router.push({ name: 'patient'})
        //     return
        // }
        // if (1 == this.type) {
        //     this.$router.push({ name: 'room'})
        //     return
        // }
        // if (2 == this.type) {
        //     this.$router.push({ name: 'preparation'})
        //     return
        // }
        // if (3 == this.type) {
        //     this.$router.push({ name: 'patient'})
        //     return
        // }
    }
}

</script>

<style lang="scss" scoped>
    .login{
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        background: #F4F4F4;
        z-index: 2;
        .logo{
            margin: 100px 0 50px;
        }
        .main{
            max-height: 400px;
            background: url(../../assets/img/login/login-bg.png) center no-repeat;
            background-size: cover;
            padding-top: 20px;
            .login-box-wrap-bg{
                display: inline-block;
                padding: 30px;
                border-radius: 10px;
                background: rgba($color: #FFF, $alpha: 0.7)
            }
            .login-box-wrap{
                width: 375px;
                border-radius: 10px;
                background: #FFF;
                margin: 0 auto;
                text-align: center;
                border: 2px solid #999;
                position: relative;
                .logo{
                    margin: 10px;
                }
                .form-group{
                    width: 300px;
                    margin: 20px auto;
                    input{
                        width: 100%;
                        height: 40px;
                        line-height: 40px;
                        margin-bottom: 10px;
                        border: 1px solid #666;
                        padding: 0 10px;
                    }
                    .btn-group{
                        padding-bottom: 20px;
                        button{
                            width: 125px;
                            height: 38px;
                            color: #FFF;
                            border: none;
                            cursor: pointer;
                        }
                        .sure{
                            background-color: #06a9ae;
                            float: left;
                            &:hover{
                                background-color: #25c4c9;
                            }
                        }
                        .cancel{
                            background-color: #666;
                            float: right;
                            &:hover{
                                background-color: #888;
                            }
                        }
                    }
                }
            }
            .err-msg{
                font-size: 13px;
                color: #fc3434;
                margin-top: 10px;
                .icon-login-err{
                    display: inline-block;
                    width: 27px;
                    height: 24px;
                    background: url(../../assets/img/icon/icon-err.png) no-repeat;
                    vertical-align: -7px;
                    margin-right: 10px;
                }
            }
        }
    }
</style>
